<template>
  <n-space
    vertical
    size="large"
    style="margin: 0px; padding: 0px"
    content-style="padding: 0px; margin: 0px"
  >
    <n-layout
      style="padding: 0px; margin: 0px"
      content-style="padding: 0px; margin:0px;"
    >
      <n-layout-header style="padding: 0px; margin: 0px">
        <div style="background: #2c3e50">
          <n-button-group size="large">
            <!-- <el-button type="primary" @click="onAddClicked">link.add</el-button> -->
            <n-button
              color="#2c3e50"
              text-color="#FFFFF0"
              @click="handleDialog('add', 0)"
              >新增</n-button
            >
          </n-button-group>
        </div>
      </n-layout-header>
      <n-layout-content content-style="padding: 0px;margin: 0px;">
        <n-data-table
          :columns="columns"
          :data="linkList"
          :style="{ height: `${height - 40}px` }"
          flex-height
        />
      </n-layout-content>
    </n-layout>
  </n-space>
</template>

<script>
// @ is an alias to /src
import Constants from "../contants";
import IPC from "../background/ipc";
import { h, onMounted, ref } from "vue";
import { NButton, useDialog } from "naive-ui";
import useLinkRepositories from "../composables/useLinkRepositories";
import useWindowSize from "../composables/useWindowSize";

const createColumns = ({ handleDialog, handleRemove }) => {
  return [
    {
      title: "名称",
      key: "name",
    },
    {
      title: "主机名",
      key: "host",
    },
    {
      title: "端口",
      key: "port",
    },
    {
      title: "用户",
      key: "user",
    },
    {
      title: "密码",
      key: "password",
    },
    {
      title: "数据库",
      key: "database",
    },
    {
      title: "Action",
      key: "actions",
      render(row) {
        return [
          h(
            NButton,
            {
              size: "small",
              onClick: () => handleDialog("edit", row.id),
            },
            { default: () => "编辑" }
          ),
          h(
            NButton,
            {
              size: "small",
              onClick: () => handleRemove(row.id),
            },
            { default: () => "删除" }
          ),
        ];
      },
    },
  ];
};
export default {
  name: "Columns",
  components: {},
  setup() {
    //const height = ref(200);

    const like = ref("");

    const { linkList, getLinkList, addLink, removeLink } =
      useLinkRepositories(like);

    const { innerHeight } = useWindowSize();

    const dialog = useDialog();

    const handleDialog = (type, linkId) => {
      IPC.invoke("window.create", {
        options: {
          title: type == "add" ? "添加" : "编辑",
          width: 600,
          height: 800,
          resizable: true, //是否支持调整窗口大小
          maximize: false, //是否最大化
          route: `/link/dialog?type=${type}&linkId=${linkId}`,
        },
      }).then((result) => {
        console.log(result);
      });
    };

    const handleRemove = async (linkId) => {
      dialog.success({
        title: "删除",
        content: "是否删除？",
        positiveText: "确定",
        negativeText: "不确定",
        onPositiveClick: () => {
          removeLink(linkId);
          IPC.send({ action: Constants.REFRESH_LINK_ENENT });
        },
      });
    };

    onMounted(() => getLinkList());

    onMounted(() => {
      IPC.revice(Constants.REFRESH_LINK_ENENT, (params) => {
        console.log("---------IPC.revice----------");
        console.log(params);
        getLinkList();
      });
    });

    return {
      like,
      height: innerHeight,
      linkList,
      getLinkList,
      addLink,
      columns: createColumns({ handleDialog, handleRemove }),
      handleDialog,
    };
  },
  methods: {
    onAddClicked() {
      var testLinkInfo = {
        name: "五菱数据库",
        host: "rds-93-pub.get.vip",
        port: "3306",
        user: "admin",
        password: "M9FMnylz",
        database: "huaz_user_center",
      };
      this.addLink(testLinkInfo);
    },
  },
};
</script>

<style lang="scss"></style>
